import React from 'react';
import { Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Doubt } from './index';
import styles from './index.less';

const QuestionMsg: React.FC<Question.MsgProps> = (props) => {
  const {
    questionSource: {
      tid,
      title,
      sex,
      age,
      forumName,
      onSetTime,
      mainBody,
      imgArr,
      description,
      score,
    },
    showNextBtn = true,
    doubt = false,
    onChangeNext = () => {},
  } = props;

  return (
    <div className={styles.detail}>
      <div className={styles['detail-title']}>
        <div>
          <span>{title}</span>
          {doubt && (
            <Doubt
              source={{ tid }}
              afterSubmit={() => {
                onChangeNext();
              }}
            />
          )}
        </div>
        <div>{score}</div>
        {score ? (
          <div className={styles['detail-title-tip']}>
            本题可获积分：<span className={styles['detail-title-error']}>{score}分</span>
            <Tooltip placement="topRight" title="每45积分折合1块钱人民币">
              <span className={styles['detail-title-circle']}>
                <QuestionCircleOutlined />
              </span>
            </Tooltip>
          </div>
        ) : (
          ''
        )}
      </div>
      <div className={styles['detail-msg']}>
        {sex && <span>{sex}</span>}
        {age && <span>{age}</span>}
        {forumName && <span>{forumName}</span>}
        <span>发病时间：{onSetTime || '不清楚'}</span>
      </div>
      {mainBody && <div className={styles['detail-content']}>病情描述及疑问：{mainBody}</div>}

      {imgArr && imgArr.length > 0 && (
        <div className={styles['detail-picbox']}>
          {imgArr.map((item, index) => (
            <div className={styles['detail-picunit']} key={index}>
              <img src={item} alt="" />
            </div>
          ))}
        </div>
      )}

      {description && <div>补充提问：{description}</div>}
      {showNextBtn && (
        <div className={styles['next-btn']} onClick={onChangeNext}>
          下一题
        </div>
      )}
    </div>
  );
};

export default QuestionMsg;
